<template>
    <div class="app-container">
        <!-- 顶部导航栏 -->
        <el-header class="header-container">
            <div class="header-left">
                <!-- Logo -->
                <img 
                    src="@/assets/images/logo.png" 
                    class="logo" 
                    alt="平台logo"
                    @click="goHome"
                />
                
                <!-- 导航菜单 -->
                <el-menu 
                    :default-active="activeIndex" 
                    class="nav-menu" 
                    mode="horizontal"
                    @select="handleSelect"
                >
                    <!-- 系统设置下拉 -->
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-setting"></i>
                            <span>系统设置</span>
                        </template>
                        <el-menu-item index="1-1">
                            <i class="el-icon-notebook-2"></i>
                            <span>日志管理</span>
                        </el-menu-item>
                        <el-menu-item index="1-2">
                            <i class="el-icon-s-custom"></i>
                            <span>角色管理</span>
                        </el-menu-item>
                    </el-submenu>

                    <!-- 数据统计下拉 -->
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-data-line"></i>
                            <span>数据统计</span>
                        </template>
                        <el-menu-item index="2-1">
                            <i class="el-icon-user"></i>
                            <span>用户统计</span>
                        </el-menu-item>
                        <el-menu-item index="2-2">
                            <i class="el-icon-document"></i>
                            <span>内容统计</span>
                        </el-menu-item>
                        <el-menu-item index="2-3">
                            <i class="el-icon-data-analysis"></i>
                            <span>访问统计</span>
                        </el-menu-item>
                    </el-submenu>

                    <el-menu-item index="3">
                        <i class="el-icon-link"></i>
                        <span>论坛官网</span>
                    </el-menu-item>
                </el-menu>
            </div>

            <!-- 时间显示 -->
            <div class="time-display">
                {{ currentTime }}
            </div>

            <!-- 右侧操作菜单 -->
            <div class="header-right">
                <el-dropdown trigger="click">
                    <span class="el-dropdown-link">
                        <i class="el-icon-user" style="margin-right:5px"></i>
                        管理员<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="handleCommand('switchAccount')">
                            切换账号
                        </el-dropdown-item>
                        <el-dropdown-item @click.native="handleCommand('logout')">
                            退出登录
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </el-header>

        <!-- 主内容区域 -->
        <div class="content-container">
            <!-- 左侧导航栏 -->
            <el-aside width="200px" class="sidebar"> 
                <el-menu
                    :default-active="activeLeftMenuIndex"
                    class="left-nav-menu"
                    mode="vertical"
                    @select="handleLeftMenuSelect"
                >
                    <el-submenu index="10">
                        <template slot="title">
                            <i class="el-icon-user"></i>
                            <span>用户管理</span>
                        </template>
                        <el-menu-item index="10-1">
                            <i class="el-icon-document"></i>
                            <span>用户信息管理</span>
                        </el-menu-item>
                        <el-menu-item index="10-2">
                            <i class="el-icon-s-custom"></i>
                            <span>用户账号管理</span>
                        </el-menu-item>
                        <el-menu-item index="10-3">
                            <i class="el-icon-monitor"></i>
                            <span>用户行为管理</span>
                        </el-menu-item>
                    </el-submenu>
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-s-comment"></i>
                            <span>论坛管理</span>
                        </template>
                        <el-menu-item index="1-1">
                            <i class="el-icon-document"></i>
                            <span>帖子管理</span>
                        </el-menu-item>
                        <el-menu-item index="1-2">
                            <i class="el-icon-chat-dot-round"></i>
                            <span>评论管理</span>
                        </el-menu-item>
                        <el-menu-item index="1-3">
                            <i class="el-icon-warning"></i>
                            <span>敏感词管理</span>
                        </el-menu-item>
                        <el-menu-item index="1-4">
                            <i class="el-icon-collection-tag"></i>
                            <span>疾病分类管理</span>
                        </el-menu-item>
                    </el-submenu>
                  
                    <el-submenu index="health-archive">
                      <template slot="title">
                        <i class="el-icon-first-aid-kit"></i>
                        <span>健康档案管理</span>
                      </template>
                      <el-menu-item index="2">
                        <i class="el-icon-first-aid-kit"></i>
                        <span>健康数据管理</span>
                      </el-menu-item>
                      <el-menu-item index="11">
                        <i class="el-icon-document-checked"></i>
                        <span>体检报告管理</span>
                      </el-menu-item>
                      <el-menu-item index="12">
                        <i class="el-icon-document"></i>
                        <span>既往病史管理</span>
                      </el-menu-item>
                      <!-- 新增医疗报销管理菜单项 -->
                      <el-menu-item index="13">
                        <i class="el-icon-money"></i>
                        <span>医疗报销管理</span>
                      </el-menu-item>
                    </el-submenu>
                    <el-menu-item index="3">
                        <i class="el-icon-chat-line-square"></i>
                        <span>意见反馈管理</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-picture"></i>
                        <span>轮播图管理</span>
                    </el-menu-item>
                    <el-menu-item index="5">
                        <i class="el-icon-collection"></i>
                        <span>小贴士管理</span>
                    </el-menu-item>
                    <el-menu-item index="6">
                        <i class="el-icon-star-on"></i>
                        <span>热门话题管理</span>
                    </el-menu-item>
                    <el-menu-item index="7">
                        <i class="el-icon-help"></i>
                        <span>公益信息管理</span>
                    </el-menu-item>
                    <el-menu-item index="8">
                        <i class="el-icon-cpu"></i>
                        <span>AI互动管理</span>
                    </el-menu-item>
                    <el-menu-item index="9">
                        <i class="el-icon-user-solid"></i>
                        <span>个人信息管理</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>

            <!-- 右侧主内容 -->
            <el-main>
                <router-view v-if="$route.matched.length > 1"></router-view>
                <div v-else class="welcome-container">
                    <h1>欢迎使用【愈见希望】后台管理系统！</h1>
                    <el-carousel :interval="3000" height="400px">
                        <el-carousel-item v-for="(item, index) in carouselImages" :key="index">
                            <img :src="item" class="carousel-image">
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </el-main>
        </div>
    </div>
</template>

<script>
// 在顶部添加导入语句
import LogManagement from '@/components/system-settings/LogManagement.vue'

export default {
    name: 'Home',
    components: {
        LogManagement,
    },
    data() {
        return {
            activeIndex: '1',
            currentTime: '',
            activeLeftMenuIndex: '1', // 控制左侧导航的选中项
            carouselImages: [
                require('@/assets/images/轮播图1.png'),
                require('@/assets/images/轮播图2.png'),
                require('@/assets/images/轮播图3.png')
            ]
        }
    },
    mounted() {
        this.updateTime()
        setInterval(this.updateTime, 1000)
    },
    methods: {
        // 新增返回首页方法
        goHome() {
            this.$router.push('/')
        },
        // 更新时间显示
        updateTime() {
            const date = new Date()
            this.currentTime = `${date.getFullYear()}年${
                date.getMonth() + 1
            }月${date.getDate()}日 ${this.formatTimeUnit(
                date.getHours()
            )}:${this.formatTimeUnit(date.getMinutes())}:${this.formatTimeUnit(
                date.getSeconds()
            )}`
        },
        // 时间单位格式化
        formatTimeUnit(unit) {
            return unit < 10 ? '0' + unit : unit
        },
        // 菜单选择处理
        handleSelect(index) {
            switch(index) {
                case '1-1':
                    this.$router.push('/log-management')  // 更新路由路径
                    break;
                case '1-2':
                    this.$router.push('/role-management')  // 更新路由路径
                    break;
                case '2-1':
                    this.$router.push('/user-statistics')
                    break;
                case '2-2':
                    this.$router.push('/content-statistics')
                    break;
                case '2-3':
                    this.$router.push('/access-statistics')
                    break;
                case '3':
                    window.open('https://your-forum-website.com')
                    break;
            }
        },
        // 处理左侧导航栏的选择
        handleLeftMenuSelect(index) {
            // Only navigate if not already on the target route
            const routeMap = {
              '1': '/forum',
              '1-1': '/post-management',
              '1-2': '/comment-management',
              '1-3': '/sensitive-word-management',
              '1-4': '/disease-category-management',
              '2': '/health-data',
              '11': '/medical-report-management',
              '12': '/medical-history',
              '13': '/medical-reimbursement',
              '3': '/feedback-management',
              '4': '/carousel-management',
              '5': '/tips',
              '6': '/hot-topics',
              '7': '/public-info',
              '8': '/home/ai-interaction',
              '9': '/personal-info',
              '10-1': '/user-info',
              '10-2': '/user-account-management',
              '10-3': '/user-behavior'
            };
        
            const targetRoute = routeMap[index];
            if (targetRoute && this.$route.path !== targetRoute) {
              this.$router.push(targetRoute).catch(err => {
                // Ignore the redundant navigation error
                if (err.name !== 'NavigationDuplicated') {
                  throw err;
                }
              });
            }
        },
        // 下拉菜单处理
        handleCommand(command) {
            if(command === 'logout') {
                this.$confirm('确定要退出登录吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 这里添加退出登录逻辑
                    this.$router.push('/login')
                })
            } else if(command === 'switchAccount') {
                // 切换账号逻辑
                this.$prompt('请输入新账号', '切换账号', {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消'
                }).then(({ value }) => {
                    this.$message.success('账号切换成功')
                })
            }
        }
    }
}
</script>

<style scoped>
.app-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 0 20px;
}

.header-left {
    display: flex;
    align-items: center;
}

.logo {
    height: 40px;
    margin-right: 30px;
}

.nav-menu {
    border-bottom: none;
}

.time-display {
    font-size: 16px;
    color: #666;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.header-right {
    cursor: pointer;
    color: #666;
}

.el-dropdown-link {
    display: flex;
    align-items: center;
}

.el-icon-user {
    margin-right: 5px;
}

.content-container {
    display: flex;
    height: calc(100vh - 64px);
}

.sidebar {
    background-color: #f7f7f7;
    padding-top: 20px;
    width: 200px; /* 保持左侧导航栏宽度为200px */
    overflow-x: hidden; /* 去掉水平滚动条 */
}

.left-nav-menu {
    width: 100%;
}

.left-nav-menu .el-menu-item,
.left-nav-menu .el-submenu__title {
    font-size: 16px; /* 设置统一的字体大小 */
    color: #333; /* 设置统一的字体颜色，避免和其他部分字体颜色不一致 */
}

/* 确保菜单项展开时，标题文字大小不变 */
.left-nav-menu .el-submenu.is-opened .el-submenu__title {
    font-size: 16px;
}

.el-main {
    background-color: #f0f2f5;
    padding: 20px;
    flex: 1;
}

.welcome-container {
    text-align: center;
    padding: 20px;
}

.welcome-container h1 {
    margin-bottom: 30px;
    color: #333;
}

.carousel-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.el-carousel {
    margin-top: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>